<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="coupon-list" v-if="coupon_list.length>0">
			<block v-for="(item,index) in coupon_list" :key="index">
				<view class="coupon-com" :class="item.status===0?'no-select':''">
					<view class="coupon-com-main" @click="jump(item)">
						<view class="coupon-com-main-left" v-if="item.discount_type===1">
							<text class="coupon-com-main-left-small">￥</text>
							<text class="coupon-com-main-left-strong">{{item.discount_money}}</text>
						</view>
						<view class="coupon-com-main-left" v-if="item.discount_type===2">
							<text class="coupon-com-main-left-strong">{{item.discount_rate}}</text>
							<text class="coupon-com-main-left-small">折</text>
						</view>
						<view :class="item.discount_type===2?'tag':'tag2'">{{item.discount_type_name}}</view>
						<view class="coupon-com-main-right">
							<view class="coupon-com-main-right-name">{{item.title}}</view>
							<view class="coupon-com-main-right-des">{{item.discount_text}} ( {{item.is_over==1?'可叠加':'不可叠加'}} )</view>
							<view class="coupon-com-main-right-des">[ {{item.use_text}} ]</view>
							<view class="coupon-com-main-right-des">有效期：{{item.term_type_name}}</view>
						</view>
						<view class="coupon-com-main-right-ex1" v-if="item.status===0">
							<text>不可用</text>
						</view>
					</view>
					<view class="coupon-com-footer">
						<view class="com-button">
							 <button class="my-but-primary" @click="receive(item)">领取优惠券</button>
						</view>
					</view>
				</view>
			</block>
			<u-loadmore :status="page_status" :line="true"/>
		</view>
		<view v-else>
			<u-empty text="暂无优惠券" icon="/static/images/empty/data.png"></u-empty>
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import checkLogin from '@/mixins/loginCheck.js'
	import uPage from '@/common/page';  // 引入分页工具

	export default {
		mixins: [checkLogin],
		data() {
			return {
				nav_title: '领券中心',
				coupon_list: [],
				page_status: "loadmore",
				page_data: {},
				myshare: {
					title: "优惠券领券中心",
					path: "pages/coupon/list/index",
					imageUrl: "",
				}
			}
		},
		onLoad() {
			this.initData()
		},
		onReachBottom() {  // 滚动触底事件
			this.getList(this.page_data)
		},
		methods: {
			initData() {
				// 初始化清空数据
				this.coupon_list = []
				this.page_data = {}
				this.getList()
			},
			getList(page = {}) {
				// 已加载全部则停止
				if (this.page_data.end) return
				
				// 显示加载状态
				this.page_status = 'loading'
				
				this.$u.api.couponList({
					page: page.number || 1  // 获取当前页码
				}).then(res => {
					// 合并数据
					this.coupon_list = this.coupon_list.concat(res.data.list)
					
					// 更新分页信息（使用uPage工具）
					this.page_data = uPage.setData(res.data)
					
					// 更新加载状态
					this.page_status = this.page_data.load
				}).catch(() => {
					this.page_status = 'loadmore'
				})
			},
			//领取优惠券或跳转
			jump(item){
				let id=item.coupon_id?item.coupon_id:item.id;
				this.$c.a('coupon/detail/index?receive=1&id='+id);
			},
			//领取全部优惠
			allReceive(){
				this.$u.api.couponReceive({ids:this.ids.json(',')}).then(res=>{
					this.$c.success('领取成功！')
					this.$emit('receivesCall')
				})
			},
			//领取优惠券
			receive(item){
				this.$u.api.couponReceive({id:item.id}).then(res=>{
					this.$c.success('领取成功！')
				})		
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/coupon.css";
	page{
		background-color: #F0F1F6;
	}
</style>
